<template>
	<view>
		<view class="w100 flex flex_jc flex_wrap">
			<view class="w710">
				<view class="title mt30">{{discussion_info.name}}</view>
				<view v-if="imgs_display&&discussion_info.imgs.length>0" class="imgs w100 flex flex_jc mt20" v-for="(item,index) in discussion_info.imgs">
					
					<image mode="widthFix":src="item" :style="{width:discussion_info.wds[index] + 'px'}"></image>
					
				</view>
			</view>
		</view>
		
		<view id="comment" class="comment">
			<hb-comment ref="hbComment" 
					@add="add" 
					@del="del" 
					@like="like" 
					@moreComment="moreComment" 
					@desComment="desComment" 
					@focusOn="focusOn" 
					:deleteTip="'确认删除？'"
					:cmData="commentData" 
					v-if="commentData">
			</hb-comment>
		</view>
	</view>
	
</template>

<script>
	import {addComment,addLikeForComment,
	delComment,articleLike,articleCollect,getMoreComment,getDiscussionDetail} from "@/api/api"
	export default {
		data() {
			return {
				imgs_display:false,
				window_width:0,
				discussion_info:[],
				discussion_id:0,
				commentData :[],
				readNumer: 193,
				commentList: [],
				comment_count:0,
				parent_comment_count:0,
				has_like:false,
				has_collect:false,
				newcomment_count:0,
				page:1,
				tips:'数据加载中'
				
			}
		},
		
		
		onLoad: function (option) {
			console.log(uni.getSystemInfoSync());
			this.window_width = uni.getSystemInfoSync().windowWidth
			this.discussion_id = option.id
			this.getDiscussionDetail()
			
				  
		},
		
		onShow:function(){
			
			
		},
		
		onReachBottom(){
		  if(this.commentList.length>=this.comment_count){
		  	this.tips = '所有数据加载完成'
		  }else{
		  	this.page += 1
		  	this.getMoreComment()
		  }
		},
	
		methods:{
			
			getDiscussionDetail(){
				getDiscussionDetail(this.discussion_id).then(res=>{
					if(res.code==0){
						this.discussion_info = res.data;
						
						this.comment_count = res.data.comment_count
						// this.parent_comment_count = res.data.parent_comment_count
						this.commentList = res.data.comments
						
						this.commentData = {
							"readNumer": this.readNumer,
							"commentSize": res.data.comment_count,
							"comment": this.commentList,
							"newcomment_count":this.newcomment_count
						}
						
						
						if(this.discussion_info.imgs.length>0){
							var that = this
							for(var i =0 ;i<that.discussion_info.imgs.length;i++){
								that.discussion_info.wds = []
								uni.getImageInfo({
									src:that.discussion_info.imgs[i],
									success(e) {
										if(e.width<that.window_width){
											that.discussion_info.wds.push(e.width)
										}else{
											that.discussion_info.wds.push(that.window_width)
										}
										if(that.discussion_info.wds.length==that.discussion_info.imgs.length){
											that.imgs_display = true
										}
									}
								})
							
							}
						}
						
					}else{
						this.msg(res.msg)
					}
				})
			},
			
			//commentstart
			getMoreComment(){
				var data = {
					page:this.page,
					id:this.discussion_id
				}
				getMoreComment(data).then(res=>{
					
					for(var i = 0 ; i<res.data.length;i++){
						
						this.commentList.push(res.data[i])
					}
					
					this.commentData = {
					    "readNumer": this.readNumer,
					    "commentSize": this.comment_count,
					    "comment": this.commentList,
						"newcomment_count":this.newcomment_count
					}
					
					console.log(res)
				})
			},
			
			//打开更多回复
			moreComment(index){
				this.commentList[index].children_limit = this.commentList[index].children_limit+5
				this.commentData = {
				    "readNumer": this.readNumer,
				    "commentSize": this.commentList.length,
				    "comment": this.commentList,
					"newcomment_count":this.newcomment_count
				}
			},
			
			//收起更多回复
			desComment(index){
				this.commentList[index].children_limit = 3
				this.commentData = {
				    "readNumer": this.readNumer,
				    "commentSize": this.commentList.length,
				    "comment": this.commentList,
					"newcomment_count":this.newcomment_count
				}
			},
			
			focusOn(){
				console.log('focusOn')
			},
			//给评论点赞和取消点赞
			like(res){
				var that = this
				var data = {
					id:res.comment_id,
					//被点赞者
					notice_user_id:res.comment_user_id,
					type:'comment'
				}
				addLikeForComment(data).then(res2=>{
					if(res2.code==0){
						//点赞成功
						console.log('addLikeForComment-success')
						//更新评论
						that.updateCommentLike(res.parent_id,res.comment_id,res2.data.has_like)
						uni.showToast({
							title: res2.msg,
							icon: 'none',
						});
					}else{
						uni.showToast({
							title: res2.msg,
							icon: 'none',
						});
					}
				})
			},
			//删除评论
			del(res){
				delComment(res.comment_id).then(res2=>{
					if(res2.code==0){
						this.updateCommentDel(res.comment_id,res.parent_id)
						uni.showToast({
							title: res2.msg,
							icon: 'none',
						});
					}else{
						uni.showToast({
							title: res2.msg,
							icon: 'none',
						});
					}
				})
				console.log('del')
			},
			//添加评论
			add(res){
				var that = this
				var data={
					attack_id:this.discussion_id,
					comment : res.content,
					parent_id:res.pId,
					commented_user_id:res.commentUserId,
					commented_id:res.commentId,
					type:'discussion'
				}
				addComment(data).then(res=>{
					if(res.code==0){
						//评论成功
						console.log('addComment-success')
						//更新评论
						that.updateCommentAdd(res.data)
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
						setTimeout(function(){
							//关闭评论窗口
							that.$refs.hbComment.addComplete()
						},700)
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					}
				})
			},
			
			updateCommentAdd(comment_data){
				if(comment_data.parent_id>0){
					for(var i = 0; i<this.commentList.length;i++){
						if(this.commentList[i].id==comment_data.parent_id){
							this.commentList[i].children_limit +=  1
							this.commentList[i].children.unshift(comment_data)
							break
						}
					}
					
				}else{
					this.commentList.unshift(comment_data)
				}
				
				var newcomment_count = 0;
				for(var i = 0; i<this.commentList.length;i++){
					if(this.commentList[i].newcomment){
						newcomment_count += 1
					}
				}
				this.newcomment_count = newcomment_count
				this.commentData = {
				    "readNumer": this.readNumer,
				    "commentSize": this.commentList.length,
				    "comment": this.commentList,
					"newcomment_count":this.newcomment_count
				}
				
			},
			
			updateCommentDel(comment_id,parent_id){
				if(parent_id>0){
					for(var i = 0; i<this.commentList.length;i++){
						if(this.commentList[i].id==parent_id){
							this.commentList[i].children_limit -=  1
							for(var j = 0; j<this.commentList[i].children.length; j++){
								if(this.commentList[i].children[j].id==comment_id){
									//删除评论
									this.commentList[i].children.splice(j,1)
									break
								}
								
							}
						}
					}
					
				}else{
					for(var i = 0;i<this.commentList.length;i++){
						if(this.commentList[i].id==comment_id){
							//删除评论
							this.commentList.splice(i,1)
							break
						}
						
					}
				}
				
				var newcomment_count = 0;
				for(var i = 0; i<this.commentList.length;i++){
					if(this.commentList[i].newcomment){
						newcomment_count += 1
					}
				}
				this.newcomment_count = newcomment_count
				this.commentData = {
				    "readNumer": this.readNumer,
				    "commentSize": this.commentList.length,
				    "comment": this.commentList,
					"newcomment_count":this.newcomment_count
				}
				
			},
			
			updateCommentLike(parent_id,comment_id,even){
				if(parent_id>0){
					for(var i = 0; i<this.commentList.length;i++){
						if(this.commentList[i].id==parent_id){
							for(var j = 0; j<this.commentList[i].children.length;j++){
								if(this.commentList[i].children[j].id==comment_id){
									if(even){
										this.commentList[i].children[j].has_like = true
										this.commentList[i].children[j].like_num++ 
									}else{
										this.commentList[i].children[j].has_like = false
										this.commentList[i].children[j].like_num--
									}
									break
								}
							}
							break
						}
					}
				}else{
					for(var i = 0; i<this.commentList.length;i++){
						if(this.commentList[i].id==comment_id){
							if(even){
								this.commentList[i].has_like = true
								this.commentList[i].like_num++ 
							}else{
								this.commentList[i].has_like = false
								this.commentList[i].like_num-- 
							}
							
							break
						}
					}
				}
				
				this.commentData = {
				    "readNumer": this.readNumer,
				    "commentSize": this.commentList.length,
				    "comment": this.commentList,
					"newcomment_count":this.newcomment_count
				}
				
			},
			
			preview(src, e) {
			  // do something
			},
			navigate(href, e) {
			  // do something
			},
			msg(msg){
				uni.showToast({
					title: msg,
					icon: 'none',
				});
			}
			
		}
	}
</script>
<style>
	.u-transition{width: 100%;height: 100%;}
	page{background-color: #FFFFFF;}
</style>
<style scoped>
	.title{font-size: 40rpx;}
</style>